<template>
  <div class="countdown-wrapper">
    <div class="contes">
      <div class="left">
        <img src="@/assets/image/pic.png" alt="">
      </div>
      <div class="right">
        <p class="title font-family">Amateras Presales is Coming !</p>
        <p class="label font-family" v-if="isbegin === 0">Begins at {{start}}</p>
        <p class="label font-family" v-if="isbegin === 1">Ends at {{end}}</p>
        <ul class="time-count font-medium">
          <li>
            <p class="count font-medium">
              <label class="mask"></label>
              <label class="time font-semiBold">
                {{countDown.day}}
              </label>
            </p>
            <p class="name">DAYS</p>
          </li>
          <li>
            <p class="count font-medium">
              <label class="mask"></label>
              <label class="time font-semiBold">
                {{countDown.hour}}
              </label>
            </p>
            <p class="name">HOURS</p>
          </li>
          <li>
            <p class="count font-medium">
              <label class="mask"></label>
              <label class="time font-semiBold">
                {{countDown.minute}}
              </label>
            </p>
            <p class="name">MINUTES</p>
          </li>
          <li>
            <p class="count font-medium">
              <label class="mask"></label>
              <label class="time font-semiBold">
                {{countDown.second}}
              </label>
            </p>
            <p class="name">SECONDS</p>
          </li>
        </ul>
        <div class="person">
          <img src="../../assets/image/person-mobile.png" alt=""/>
        </div>
        <!-- 按钮 -->
        <div class="btn-wrapper">
          <button class="btn primary-button gray font-family" v-if="isbegin === 0">Sign up</button>
          <button class="btn primary-button gray font-family" v-else @click="check">Check My Address</button>
          <p class="question font-medium" v-if="isbegin === 0" @click="link('https://twitter.com/Amateras_app/status/1410547548406779905')">How to take part in ?</p>
          <p class="tip font-semiBold" v-else>Only Address in Whitelist can take part in</p>
        </div>
      </div>
    </div>

    <div v-if="showDialog">
      <CheckDialog :showDialog.sync="showDialog" v-bind="dialogProps"></CheckDialog>
    </div>
 <div class="footer"><Footer></Footer></div>
  </div>
</template>

<script>
import api from '@/api/request';
import { mapState } from 'vuex';
import { chainIdMap } from '@/utils/constants';
import Footer from '@/components/footer/Index';
import CheckDialog from './components/CheckDialog';

let timer = null;
let serverTimer = null;

export default {
  components: {
    CheckDialog,
    Footer,
  },
  data() {
    return {
      start: '19:00 2021/07/04',
      end: '9:00 2021/07/07',
      curDate: new Date().getTime(),
      showDialog: false,
      dialogProps: {
        title: 'Check Your Address (BEP20)',
        confirmText: 'Go To Presales',
        dialogType: 'confirm',
      },
    };
  },
  mounted() {
    console.log(moment.tz.guess());
    this.getTime();
    // 每10s获取服务器时间
    if (serverTimer) clearInterval(serverTimer);
    serverTimer = setInterval(() => { this.getTime(); }, 10000);
    if (timer) clearInterval(timer);
    timer = setInterval(() => { this.curDate += 1000; }, 1000);
  },
  destroyed() {
    if (timer) clearInterval(timer);
    if (serverTimer) clearInterval(serverTimer);
  },
  methods: {
    check() {
      if (!this.isCurrentNet) {
        this.dialogProps.confirmText = 'Switch to BSC';
      } else {
        this.dialogProps.confirmText = 'Go To Presales';
      }
      this.showDialog = true;
    },
    getTime() {
      api.getTimestamp().then(({ t }) => {
        this.curDate = Number(t);
        this.checkStatus();
      });
    },
    // 检测时间
    checkStatus() {
      if (this.isbegin === 2) this.$router.push('/swap/end');
    },
    link(url) {
      window.open(url);
    },
  },
  watch: {
    isbegin() {
      this.checkStatus();
    },
  },
  computed: {
    ...mapState(['chainId']),
    timezone() {
      return 'Asia/Tokyo';
    },
    dateFormat() {
      return 'YYYY-MM-DD HH:mm:ss';
    },
    startTime() {
      return moment.tz('2021-7-04 19:00:00', this.dateFormat, this.timezone).valueOf();
    },
    endTime() {
      return moment.tz('2021-7-07 08:59:59', this.dateFormat, this.timezone).valueOf();
    },
    // 0 未开始 1 进行中 2 结束
    isbegin() {
      let num = 0;
      if (this.startTime <= this.curDate && this.curDate < this.endTime) {
        num = 1;
      } else if (this.curDate > this.endTime) {
        num = 2;
      }
      return num;
    },
    countDown() {
      const { countDown } = this.$options.filters;
      if (this.startTime >= this.curDate) {
        return countDown((this.startTime - this.curDate) / 1000);
      }
      return countDown((this.endTime - this.curDate) / 1000);
    },
    isCurrentNet() {
      return this.chainId === chainIdMap['BSC'];
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';
.countdown-wrapper{
  width: 100%;
  min-height: calc(100vh - 190px);
  background: url('../../assets/image/taiyang.png') center top  no-repeat, url("../../assets/image/beijing.png") left top repeat-x;
  background-size: 1920px 410px;
  /*display: flex;*/
  padding-top: 60px;
  box-sizing: border-box;
  /*padding-left: 200px;*/
  .left{
    width: 511px;
    height: 720px;
    position: relative;
    overflow: hidden;
    img{
      position: absolute;
      left: -24px;
      top: 74px;
      z-index: 999;
    }
  }
  .right{
    width: 544px;
    margin-right: 20px;
    .title{
      margin-top: 104px;
      font-size: 48px;
      line-height: 54px;
      color: $global-primary;
      font-weight: bold;
    }
    .label{
      font-size: 24px;
      color: #333;
      font-weight: 900;
      margin-top: 30px
    }
    .time-count{
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      .count{
        width: 84px;
        height: 84px;
        background: #FFE4D8;
        border: 2px solid #333;
        border-radius: 12px;


        color: #333;
        font-weight: bold;
        position: relative;
        .mask{
          position: absolute;
          background: #FFCBB4;
          left: 0;
          right: 0;
          height: 42px;
          border-radius: 12px 12px 0 0;
          z-index: 20;
        }
        .time{
          position: absolute;
          left: 0;
          right: 0;
          z-index: 21;
          line-height: 84px;
          font-size: 48px;
          text-align: center;
        }
      }
      .name{
        text-align: center;
        font-weight: 900;
        font-size: 14px;
        margin-top: 22px;
      }
    }
    .question{
      font-size: 18px;
      font-weight: 800px;
      color: $global-primary;
      text-align: center;
      margin-top: 40px;
      cursor: pointer;
    }
    .tip{
      font-size: 18px;
      font-weight: 800px;
      text-align: center;
      margin-top: 30px;
    }
  }
  .btn{
    margin-top: 82px;
    width: 100%;
    position: relative;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 900;
    padding-top: 6px;
    box-sizing: border-box;
    &::after{
      content: url('../../assets/image/btn-hover.png');
      position: absolute;
      z-index: 999;
      right: -22px;
      top: -51px;
    }
  }
  .footer{
    display: flex;
    flex-direction: column;
  }
  .contes{
    display: flex;
    padding-left: 200px;

  }
}
.person{
  display: none;
}
</style>
